<template>
  <a-modal
    :title="model && model.id > 0 ? '编辑' : '新增'"
    :width="640"
    :visible="visible"
    :confirmLoading="loading"
    @ok="() => { $emit('ok') }"
    @cancel="() => { $emit('cancel') }"
  >
    <a-spin :spinning="loading">
      <a-form :form="form" v-bind="formLayout" >
        <a-form-item v-show="false" label="主键ID">
          <a-input v-decorator="['id', { initialValue: 0 }]" disabled />
        </a-form-item>
        <a-form-item label="已创建体系" v-show="!model">
          <a-select
            placeholder="请选择已创建体系"
            v-decorator="[
              'declarationSystemIdOld',
              {rules: [{ required: !model, message: '请选择已创建体系'}]}
            ]" >
            <a-select-option v-for="item in systemList" :key="item.id" :value="item.id" :title="item.name">{{ item.name }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="体系名称">
          <a-input
            placeholder="请输入体系名称"
            v-decorator="['name', {rules: [{required: true, message: '请输入体系名称'}]}]" />
        </a-form-item>
        <!-- <a-form-item label="组织类别">
          <a-select
            mode="multiple"
            showArrow
            placeholder="请选择组织类别"
            optionFilterProp="title"
            v-decorator="[
              'typeIds',
              {rules: [{ required: true, message: '请选择组织类别'}]}
            ]" >
            <a-select-option v-for="item in categoryList" :key="item.id" :value="item.id" :title="item.type">{{ item.type }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="申报级别">
          <a-select
            mode="multiple"
            showArrow
            placeholder="请选择社会申报级别"
            optionFilterProp="title"
            v-decorator="[
              'levelIds',
              {rules: [{ required: true, message: '请选择社会申报级别'}]}
            ]" >
            <a-select-option v-for="item in levelList" :key="item.id" :value="item.id" :title="item.level">{{ item.level }}</a-select-option>
          </a-select>
        </a-form-item> -->
        <a-form-item label="体系状态" v-show="model && model.id > 0">
          <a-select
            placeholder="请选择体系状态"
            v-decorator="[
              'status',
              {rules: [{ required: model && model.id > 0, message: '请选择体系状态'}]}
            ]" >
            <a-select-option :value="1">未开始</a-select-option>
            <a-select-option :value="2">填报中</a-select-option>
            <a-select-option :value="3">评审中</a-select-option>
            <a-select-option :value="4">公示中</a-select-option>
            <a-select-option :value="5">已结束</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="是否查看专家扣分">
          <a-radio-group v-decorator="['setExpertDeduction', { initialValue: 0 }]"  name="radioGroup" :default-value="0">
            <a-radio :value="0">否</a-radio>
            <a-radio :value="1">是</a-radio>
          </a-radio-group>
        </a-form-item>

      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import { getSystem } from '@/api/system'
import { getCategoryList } from '@/api/category'
import { getLevelList } from '@/api/level'
import pick from 'lodash.pick'

// 表单字段
// const fields = ['id', 'name', 'status', 'levelIds', 'typeIds']
const fields = ['id', 'name', 'status', 'declarationSystemIdOld', 'setExpertDeduction']

export default {
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    loading: {
      type: Boolean,
      default: () => false
    },
    model: {
      type: Object,
      default: () => null
    }
  },
  data () {
    this.formLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 13 }
      }
    }
    return {
      form: this.$form.createForm(this),
      systemList: [],
      categoryList: [],
      levelList: []
    }
  },
  created () {
    this.getSystemList()
    this.getCategoryList()
    this.getLevelList()
    console.log('custom modal created')

    // 防止表单未注册
    fields.forEach(v => this.form.getFieldDecorator(v))

    // 当 model 发生改变时，为表单设置值
    this.$watch('model', () => {
      this.model && this.form.setFieldsValue(pick(this.model, fields))
    })
  },
  methods: {
    getSystemList () {
      getSystem({
        current: 1,
        size: 100000
      })
          .then(res => {
            this.systemList = res.records
          })
    },
    getCategoryList () {
      getCategoryList()
          .then(res => {
            this.categoryList = res
          })
    },
    getLevelList () {
      getLevelList()
          .then(res => {
            this.levelList = res
          })
    }
  }
}
</script>
